<template>
    <div class="index">
        <!-- 二级路由的占位组件 -->
        <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
        <div class="tabbar">
            <!-- $router 路由管理对象，负责管理路由(跳路由) -->
            <!-- $route  路由对象，包含当前路由的所有信息(当前路由的地址，携带参数)-->

            <!-- <router-link to="/index/home">首页</router-link>
            <router-link to="/index/tuan">首页</router-link>
            <router-link to="/index/order">订单</router-link>
            <router-link to="/index/mine">我的</router-link> -->

            <!-- 跳路由的放式一：router-link, 必须用router-link包裹需要点击的元素 -->
            <!-- 跳路由的方式二： 借助 路由管理对象 this.$router 用过js代码跳路由 -->
            <!-- this.$router.push() -->
            <!-- this.$router.go(-1) -->
            <!-- this.$router.replace('/abc') -->

            <!-- <div @click="$router.push('/login')">去登录</div> -->

            <!-- 跳路由传参的方式：动态路由，刷新页面不会丢失 -->
            <!-- <router-link :to="'/detail.'+888">详情</router-link> -->
            <!-- 跳路由传参方式二：path + query，刷新页面不会丢失 -->
            <!-- <router-link :to="{path:'/detail',query:{name:8888}}">详情页</router-link> -->
            <!-- 跳路由传参方式三： name + params，刷新页面会丢失 -->
            <!-- <router-link :to="{name:'detail',params:{name:888}}">详情</router-link> -->
            
            <!-- <div @click="$router.push('/detail/'+888)">详情</div> -->
            <!-- <div @click="$router.push({path:'detail',query:{name:888}})">详情</div> -->
            <!-- <div @click="$router.push({name:'detail',params:{name:888}})"></div> -->


            <van-tabbar v-model="active" active-color="#f00">
                <van-tabbar-item name="home" icon="newspaper-o" @click="$router.push('/index/home')"  >首页</van-tabbar-item>
                <van-tabbar-item name="search" icon="hot-sale-o"  @click="$router.push('/index/tuan')" >爆爆团</van-tabbar-item>
                <van-tabbar-item name="friends" icon="orders-o"  @click="$router.push('/index/order')" >订单</van-tabbar-item>
                <van-tabbar-item name="setting" icon="friends-o"  @click="$router.push('/index/mine')" >我的</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
export default {
    data() {
    return {
      active: 0,
    };
  },
}
</script>

<style lang="scss" scoped>
    .tabbar{
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 10px 0;
        border-top: 1px solid #ccc;
    }
      // 入场动画
      .fade-enter{ //动画开始时
        opacity: 0;
    }
    .fade-enter-active{
        transition: all 1s;
    }
    .fade-enter-to{ //动画结束时
        opacity: 1;
    }
    //出场动画
    .fade-levae{ //动画开始时
        opacity: 0;
    }
    .fade-levae-active{
        transition: all 1s;
    }
    .fade-entlevaeer-to{ //动画结束时
        opacity: 1;
    }
</style>